:root {
/*An example of how you can take an existing variable and redefine it on one specific page. Also I wanted to run by you which purple you like more XD*/
  /* --periwinkle: #a993cf; */
}

.layout-wrapper{
  background-color: var(--black);
}

.about-hero-video{
    width: 50vw;
    height: auto;
    border-radius: 10px;
}
@media(orientation: portrait) {
  .about-hero-video {
    width: 75vw;
  }
}
@media(max-width: 500px) {
  .about-hero-video {
    width: 90vw;
  }
}

.about-gallery {
    display: grid;
 grid-template-columns: repeat(4, 1fr);;
 grid-auto-flow: dense;
background: var(--bg-gradient-2);
  padding: 5vh 0;
  overflow: hidden;
}
.about-name{
  margin-bottom: 5vh;
}

/* .about-gallery-item:not(:first-child){
    margin: -5px 0 0 0;
} */

/* .about-gallery{
    display: flex;
    
    flex-wrap: wrap;
} */
.about-gallery-item {
    
  height: 35vh;
  /* flex: 1 0 auto; */
  transition: all 0.3s ease-in-out;

}
.about-gallery-item:not(.withtext) {
  
  z-index: 49;
}
.about-gallery-item:not(.withtext):hover{
  transform: scale(1.5) !important;  
  z-index: 51;
}

.about-gallery-item img {
object-fit: contain;
  width: 100%;
  height: 100%;
  
}


.withtext{
  z-index: 50;
  
  
}

.about-gallery-text {
    padding: 1vh 1vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--blacklesstranslucent);
    box-shadow: 1px 1px 3px 1px var(--black);
    
    transition: all 0.3s ease-in-out;
    
    p{
      font-size: var(--subpfont);
    }
}
.about-gallery-text:hover{
  opacity:.9;
  background-color: var(--black);
  box-shadow: 1px 1px 3px 3px var(--black);
}

@media (max-width: 1390px) {
  .about-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .about-gallery { grid-template-columns: repeat(2, 1fr); }
  .about-gallery-text {
    padding: 0 3vw;
  }
}